<template>
	<div class="table">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-tickets"></i> 规则设定:{{dept.deptName}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-form ref="form" :model="form" label-width="80px">
				<el-row>
					<el-col :span="4">
						<el-collapse accordion v-model="activeNames" @change="handleChange">
							<el-collapse-item name="1">
								<template slot="title">
									日常考勤<i class="header-icon el-icon-info"></i>
								</template>
								<div>可自行设定周一到周日的上班时间和休息时间；</div>
								<div>会按照法定节假日休息；</div>
							</el-collapse-item>
							<el-collapse-item title="自定义考勤" name="2">
								<div>自定义考勤时间，可以选择时间段的考勤方式</div>
								<div></div>
							</el-collapse-item>
						</el-collapse>
					</el-col>
					<el-col :span="20">
						<el-card class="box-card" id="box-card">
							<el-radio v-model="selectType" label="1">启用</el-radio>
							<el-form-item label="开始时间:">
								<el-date-picker v-model="form.startTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="结束时间:">
								<el-date-picker v-model="form.endTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="班次选择:">
								<el-select v-model="selectValue" filterable placeholder="请选择">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="选择周期:">
								<el-checkbox v-model="week.monday">周一</el-checkbox>
								<el-checkbox v-model="week.tuesday">周二</el-checkbox>
								<el-checkbox v-model="week.wednesday">周三</el-checkbox>
								<el-checkbox v-model="week.thursday">周四</el-checkbox>
								<el-checkbox v-model="week.friday">周五</el-checkbox>
								<el-checkbox v-model="week.saturday">周六</el-checkbox>
								<el-checkbox v-model="week.sunday">周日</el-checkbox>
							</el-form-item>
							<el-button type="primary" @click="addDeptRule()">保存</el-button>
						</el-card>
						<el-card class="box-card show" id="my-card">
							<el-radio v-model="selectType" label="2">启用</el-radio>
							<div class="handle-box">
								<el-button type="primary" icon="add" class="handle-add mr10" @click="openCustom()">添加</el-button>
							</div>
							<el-table :data="ruleDetailData" border style="width: 100%" ref="ruleDetailData" @selection-change="handleSelectionChange">
								<!--<el-table-column type="selection" width="55"></el-table-column>-->
								<el-input type="hidden" prop="id" sortable />

								<el-table-column prop="name" label="班次名称">
								</el-table-column>

								<el-table-column prop="startTime" label="开始时间">
								</el-table-column>

								<el-table-column prop="endTime" label="结束时间">
								</el-table-column>
								<el-table-column label="操作" width="280">
									<template slot-scope="scope">
										<!-- <el-button size="small" @click="handleUser(scope.$index, scope.row)">查看用户</el-button> -->
										<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
										<el-button size="small" type="danger" @click="deleteRuleDetail(scope.$index, scope.row)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
							<div class="pagination">
								<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
								</el-pagination>
							</div>
							<el-button type="primary" @click="addCustomType()">保存</el-button>
						</el-card>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<!-- 添加子规则 -->
		<el-dialog title="添加子规则" :visible.sync="addVisible" width="40%">
			<el-form ref="form" :model="detail" label-width="100px">
				<el-form-item label="开始时间:">
					<el-date-picker v-model="detail.startTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="结束时间:">
					<el-date-picker v-model="detail.endTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="班次选择:">

					<el-select v-model="detail.ruleId" filterable placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCustom()">确 定</el-button>
			</span>
		</el-dialog>


		<!-- 修改子规则 -->
		<el-dialog title="修改子规则" :visible.sync="editVisible" width="40%">
			<el-form ref="form" :model="detail" label-width="100px">
				<el-form-item label="开始时间:">
					<el-date-picker v-model="detail.startTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="结束时间:">
					<el-date-picker v-model="detail.endTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="班次选择:">

					<el-select v-model="detail.ruleId" filterable placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateRuleDetail()">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					startTime: '',
					endTime: ''
				},
				activeNames: ['1'],

				week: {
					monday: false,
					tuesday: false,
					wednesday: false,
					thursday: false,
					friday: false,
					saturday: false,
					sunday: false
				},
				multipleSelection: [],
				tableData: [],
				cur_page: 1,
				total: 1,
				selectType: '1',
				dept: {
					deptId: '',
					deptName: ''
				},
				options: [],
				selectValue: '',
				addVisible: false,
				editVisible: false,
				detail: {
					startTime: '',
					endTime: '',
					ruleId: '',
				},
				pageNo: 1,
				size: 10,
				ruleDetailData: [],
			}
		},
		created() {
			this.init();
		},
		computed: {
			data() {
				return this.tableData.filter((d) => {
					let is_del = false;
					for (let i = 0; i < this.del_list.length; i++) {
						if (d.name === this.del_list[i].name) {
							is_del = true;
							break;
						}
					}
					if (!is_del) {
						return d;
					}
				})
			}
		},
		methods: {
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;

			},
			handleChange(val) {
				let dv = document.getElementById("box-card");
				let mycard = document.getElementById("my-card");
				if (val == '') {
					dv.classList.add("show");
					mycard.classList.add("show");
				}
				if (val == 1) {
					dv.classList.remove("show");
					mycard.classList.add("show");
				}

				if (val == 2) {
					dv.classList.add("show");
					mycard.classList.remove("show");
				}

			},
			openCustom() {
				if (this.selectType != 2) {
					this.$message.error("请选择启用按钮");
					return;
				}
				this.detail.startTime = '';
				this.detail.endTime = '';
				this.detail.ruleId = '';
				this.addVisible = true;

			},
			getDeptRuleDetail() {
				const that = this;
				if (this.form.id != null && this.form.id != undefined && this.selectType == 2) {
					this.HttpUtil.encryptGet(
						this,
						this.Global.URLPATH.RULE_DEPT_RULE_DETAIL_CLASS + "/selectByExampleAndRowBounds", {
							deptRuleId: this.form.id,
							pageNo: this.pageNo,
							size: this.size
						},
						function(data) {
							that.ruleDetailData = data.data.list

						},
						function(data) { //访问失败
							//that.$message.success(data.msg);
						});
				}
			},
			handleEdit(index, row) {

				this.idx = index;
				const item = this.ruleDetailData[index];

				this.detail.startTime = item.startTime
				this.detail.endTime = item.endTime
				this.detail.ruleId = item.ruleId
				this.detail.id = item.id

				/**
				 * 显示窗口
				 */
				this.editVisible = true;

			},
			/**
			 * 单独值保存自定义的启用
			 */
			addCustomType() {
				const dept = JSON.parse(sessionStorage.getItem(this.Global.SESSION_CONFIG.DEPT_RULE_THIS));
				this.dept = dept;
				this.form.mechanismId = dept.mechanismId;
				this.form.deptId = dept.deptId;
				this.form.type = this.selectType;

				const meth = this.form.id != null && this.form.id != undefined ? this.Global.URLPATH.UPDATE : this.Global.URLPATH.INSERT
				if (this.form.id != null && this.form.id != undefined) {
					var that = this;
					this.HttpUtil.encryptPut(
						this,
						this.Global.URLPATH.RULE_DEPT_RULE_CLASS + "/" + this.form.id,
						this.form,
						function(data) {
							that.$message.success("保存成功");
							that.init();
						},
						function(data) { //访问失败
							//that.$message.success(data.msg);
						});
				} else {
					var that = this;
					this.HttpUtil.encryptPost(
						this,
						this.Global.URLPATH.RULE_DEPT_RULE_CLASS + meth,
						this.form,
						function(data) {
							that.$message.success(data.msg);
							that.init();
						},
						function(data) { //访问失败
							//that.$message.success(data.msg);
						});
				}

			},
			/**
			 * 新增自定义
			 */
			addCustom() {
				const dept = JSON.parse(sessionStorage.getItem(this.Global.SESSION_CONFIG.DEPT_RULE_THIS));
				this.dept = dept;
				this.form.mechanismId = dept.mechanismId;
				this.form.deptId = dept.deptId;
				this.form.type = this.selectType;
				//获取开始时间 
				if (this.detail.startTime == undefined || this.detail.startTime == '') {
					this.$message.error("请选择开始时间");
					return;
				}
				if (this.detail.endTime == undefined || this.detail.endTime == '') {
					this.$message.error("请选择结束时间");
					return;
				}

				if (this.detail.endTime <= this.detail.startTime) {
					this.$message.error("结束时间必须大于开始时间");
					return;
				}
				if (this.detail.ruleId == '') {
					this.$message.error("班次必须选择");
					return;
				}
				this.detail.deptRuleId = this.form.id
				this.form.deptRuleDetailJson = JSON.stringify(this.detail);
				const meth = this.form.id != null && this.form.id != undefined ? this.Global.URLPATH.UPDATE : this.Global.URLPATH.INSERT
				if (this.form.id != null && this.form.id != undefined) {
					var that = this;
					this.HttpUtil.encryptPut(
						this,
						this.Global.URLPATH.RULE_DEPT_RULE_CLASS + "/" + this.form.id,
						this.form,
						function(data) {
							that.$message.success("保存成功");
							that.addVisible = false;
							that.init();
						},
						function(data) { //访问失败
							//that.$message.success(data.msg);
						});
				} else {
					var that = this;
					this.HttpUtil.encryptPost(
						this,
						this.Global.URLPATH.RULE_DEPT_RULE_CLASS + meth,
						this.form,
						function(data) {
							that.$message.success(data.msg);
							that.addVisible = false;
							that.init();
						},
						function(data) { //访问失败
							//that.$message.success(data.msg);
						});
				}

			},

			/**
			 * 修改自定义规则明细
			 */
			updateRuleDetail() {
				const dept = JSON.parse(sessionStorage.getItem(this.Global.SESSION_CONFIG.DEPT_RULE_THIS));
				this.dept = dept;
				//获取开始时间 
				if (this.detail.startTime == undefined || this.detail.startTime == '') {
					this.$message.error("请选择开始时间");
					return;
				}
				if (this.detail.endTime == undefined || this.detail.endTime == '') {
					this.$message.error("请选择结束时间");
					return;
				}

				if (this.detail.endTime <= this.detail.startTime) {
					this.$message.error("结束时间必须大于开始时间");
					return;
				}
				if (this.detail.ruleId == '') {
					this.$message.error("班次必须选择");
					return;
				}

				var that = this;
				this.HttpUtil.encryptPut(
					this,
					this.Global.URLPATH.RULE_DEPT_RULE_DETAIL_CLASS + "/" + this.detail.id,
					this.detail,
					function(data) {
						that.$message.success("保存成功");
						that.editVisible = false;
						that.init();
					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});

			},

			/**
			 * 删除自定义规则明细
			 */
			deleteRuleDetail(index, row) {
				this.idx = index;
				const item = this.ruleDetailData[index];
				var that = this;
				this.HttpUtil.encryptDelete(
					this,
					this.Global.URLPATH.RULE_DEPT_RULE_DETAIL_CLASS + "/" + item.id, {
						id: item.id
					},
					function(data) {
						that.$message.success("删除成功");
						that.init();
					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});

			},
			/***
			 * 新增基础规则
			 */
			addRule1() {
				this.HttpUtil.encryptPost(
					this,
					this.Global.URLPATH.RULE_CLASS_SELECT, {
						mechanismId: dept.mechanismId,
						deptId: dept.deptId
					},
					function(data) {
						if (data.data != undefined) {

							for (var i in data.data) {
								// that.items.push({startTime: data.data[i].startTime, endTime: data.data[i].endTime})

								that.options.push({
									value: data.data[i].id,
									label: data.data[i].name
								})

							}
							// that.dataRec = data.data;

						}

					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			},
			init() {
				this.week = {
					monday: false,
					tuesday: false,
					wednesday: false,
					thursday: false,
					friday: false,
					saturday: false,
					sunday: false
				};
				this.form = {
					startTime: '',
					endTime: ''
				};
				this.selectValue = '';
				this.ruleInit();

				/**
				 * 查询当前学则
				 */
				const dept = JSON.parse(sessionStorage.getItem(this.Global.SESSION_CONFIG.DEPT_RULE_THIS));
				this.dept = dept;

				var that = this;

				this.HttpUtil.encryptGet(
					this,
					this.Global.URLPATH.RULE_DEPT_RULE_CLASS + this.Global.URLPATH.SELECT, {
						mechanismId: dept.mechanismId,
						deptId: dept.deptId
					},
					function(data) {
						if (data.data != undefined && data.data.length > 0) {
							that.form.id = data.data[0].id
							that.form.startTime = data.data[0].startTime;
							that.form.endTime = data.data[0].endTime;

							that.selectValue = data.data[0].ruleId;
							that.selectType = data.data[0].type + '';
							if (that.selectType == 2) {
								that.getDeptRuleDetail();
							}

							/**
							 * 设置默认选中卡片
							 */
							that.activeNames = [that.selectType];
							that.handleChange(data.data[0].type);
							/**
							 * 显示默认的周期
							 */
							const wd = data.data[0].weekDay.split(",");
							for (var m = 0; m < wd.length; m++) {
								if (wd[m] == 1) {
									that.week.monday = true;
								}
								if (wd[m] == 2) {
									that.week.tuesday = true;
								}
								if (wd[m] == 3) {
									that.week.wednesday = true;
								}
								if (wd[m] == 4) {
									that.week.thursday = true;
								}
								if (wd[m] == 5) {
									that.week.friday = true;
								}
								if (wd[m] == 6) {
									that.week.saturday = true;
								}
								if (wd[m] == 7) {
									that.week.sunday = true;
								}

							}

						}

					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});

			},
			ruleInit() {
				/**
				 * 查询当前学则
				 */
				const dept = JSON.parse(sessionStorage.getItem(this.Global.SESSION_CONFIG.DEPT_RULE_THIS));
				this.dept = dept;
				var that = this;
				this.HttpUtil.encryptGet(
					this,
					this.Global.URLPATH.RULE_CLASS_SELECT, {
						mechanismId: dept.mechanismId,
						deptId: dept.deptId
					},
					function(data) {
						if (data.data != undefined) {
							for (var i = 0; i < that.options.length; i++) {
								that.options.splice(index, 1);
							}
							for (var i in data.data) {
								// that.items.push({startTime: data.data[i].startTime, endTime: data.data[i].endTime})

								that.options.push({
									value: data.data[i].id,
									label: data.data[i].name
								})

							}
							// that.dataRec = data.data;

						}

					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			},
			/**
			 * 增加常用规则的方法
			 */
			addDeptRule() {
				//首先判断类别
				if (this.selectType != '1') {
					this.$message.error("请选择启用本模块后保存");
					return;
				}
				if (this.selectType == '1') {
					//获取开始时间 
					if (this.form.startTime == undefined || this.form.startTime == '') {
						this.$message.error("请选择开始时间");
						return;
					}
					if (this.form.endTime == undefined || this.form.endTime == '') {
						this.$message.error("请选择结束时间");
						return;
					}

					if (this.form.endTime <= this.form.startTime) {
						this.$message.error("结束时间必须大于开始时间");
						return;
					}
					if (this.selectValue == '') {
						this.$message.error("班次必须选择");
						return;
					}
					if (this.week.friday == false &&
						this.week.monday == false &&
						this.week.saturday == false &&
						this.week.sunday == false &&
						this.week.thursday == false &&
						this.week.tuesday == false &&
						this.week.wednesday == false
					) {
						this.$message.error("每周的上班时间必须选择");
						return;
					}
				}
				const dept = JSON.parse(sessionStorage.getItem(this.Global.SESSION_CONFIG.DEPT_RULE_THIS));
				this.dept = dept;
				this.form.mechanismId = dept.mechanismId;
				this.form.deptId = dept.deptId;
				this.form.ruleId = this.selectValue;
				this.form.type = 1;
				this.form.weekDay = '0,';
				if (this.week.monday == true) {
					this.form.weekDay += ',1'
				}
				if (this.week.tuesday == true) {
					this.form.weekDay += ',2'
				}
				if (this.week.wednesday == true) {
					this.form.weekDay += ',3'
				}
				if (this.week.thursday == true) {
					this.form.weekDay += ',4'
				}
				if (this.week.friday == true) {
					this.form.weekDay += ',5'
				}
				if (this.week.saturday == true) {
					this.form.weekDay += ',6'
				}
				if (this.week.sunday == true) {
					this.form.weekDay += ',7'
				}

				const meth = this.form.id != null && this.form.id != undefined ? this.Global.URLPATH.UPDATE : this.Global.URLPATH.INSERT

				if (this.form.id != null && this.form.id != undefined) {
					var that = this;
					this.HttpUtil.encryptPut(
						this,
						this.Global.URLPATH.RULE_DEPT_RULE_CLASS + "/" + this.form.id,
						this.form,
						function(data) {
							that.$message.success("保存成功");
						},
						function(data) { //访问失败
							//that.$message.success(data.msg);
						});
				} else {
					var that = this;
					this.HttpUtil.encryptPost(
						this,
						this.Global.URLPATH.RULE_DEPT_RULE_CLASS + meth,
						this.form,
						function(data) {
							that.$message.success(data.msg);
						},
						function(data) { //访问失败
							//that.$message.success(data.msg);
						});
				}

			},
		},
		watch: {
			$route(newValue, oldValue) {
				if (newValue.path == "/rule/rule") {
					this.init()
				}
			}
		}
	}
</script>

<style scoped>
	@import url("../../../assets/css/common.css");

	.handle-box {
		margin-bottom: 10px;
		float: right;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		padding-left: 66%;
		display: inline-block;
	}

	.del-dialog-cnt {
		font-size: 16px;
		text-align: center
	}

	.parent {
		padding: 30px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.div-left {
		width: 20%;
		height: 100%;
		float: left;
	}

	.div-right {
		width: 80%;
		height: 100%;
		float: left;
	}

	.show {
		display: none;
	}
</style>
